<template>
  <div class="hello">
    <div class="bao">
      <div class="top">
        <div class="left">
          <div class="left-bao">
            <div class="left-bao-top">
              <div class="left-bao-top-img">
                <img src="../../assets/image/header/img/shizi.png" alt="" />
              </div>
              <div class="left-bao-top-span">
                <div class="left-bao-top-span-li">
                  <span>你把未来交给我 · 我绝不舍得让你输</span>
                </div>
              </div>
              <div class="white"></div>
            </div>
            <div class="left-bao-botton">
              <div class="left-bao-botton-span">
                <div class="left-bao-botton-span-a">
                  <a href="#">了解详情</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="right-img">
            <img src="../../assets/image/header/img/xiaotu.png" alt="" />
          </div>
        </div>
      </div>
      <div class="tap">
        <div id="app">
          <!-- 推荐这种写法-->
          <ul class="tab-tit">
            <li
              v-for="(item, index) in tabTitle"
              :key="index"
              @click="activeId = item.cid"
              :class="{ active: activeId == item.cid }"
            >
              {{ item.name }}
            </li>
          </ul>
          <div class="tab-content">
            <div class="baozhu">
              <swiper class="swiper" :options="swiperOption">
                <swiper-slide v-for="item in newMain" :key="item.id">
                  <div class="swiper-img">
                    <img :src="'https://itdahua.com' + item.image" alt="" />
                  </div>
                  <div class="swiper-span">
                    <div class="swiper-span-top">
                      {{ item.name }}
                    </div>
                    <div class="swiper-span-zhong">
                      {{ item.year }}年从业经验
                    </div>
                    <div class="swiper-span-bottom">
                      {{ item.introduce }}
                    </div>
                  </div>
                </swiper-slide>
              </swiper>
              <div class="swiper-pagination"></div>
              <div class="swiper-button-next" id="fuck"></div>
              <div class="swiper-button-prev" id="fuckk"></div>
              <div class="swiper-button-next" id="made"></div>
              <div class="swiper-button-prev" id="madef"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="connect">
        <div class="connect-li">
          <li class="connect-li-tou">
            <b> 友情连接: </b>
          </li>
          <div class="abao">
            <a v-for="item in indexData" :key="item.id" :href="item.href">{{
              item.name
            }}</a>
          </div>
        </div>
      </div>
      <div class="dibu">
        <div class="chunk">
          <div class="sleft">
            <div class="left-simg">
              <img src="../../assets/image/header/img/fuben.png" alt="" />
            </div>
          </div>
          <div class="zhong">
            <div class="zuo">
              <li>
                <b>关于我们</b>
              </li>
              <li class="tou">大华简介</li>
              <li>行业动态</li>
              <li>推荐就业</li>
              <li>诚聘英才</li>
            </div>
            <div class="dzhong">
              <li>
                <b>服务与支持</b>
              </li>
              <li class="tou">常见问题</li>
              <li>投诉反馈</li>
              <li>人工客服</li>
              <li>校企合作</li>
            </div>
            <div class="dyou">
              <div class="lianxi"><b>联系我们</b></div>
              <div class="dianhua">18210333691</div>
              <div class="time">周一至周五9:00-18:00</div>
            </div>
          </div>
          <div class="you">
            <div class="you-img">
              <img src="../../assets/image/header/img/zu26.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getList } from "../../http/api";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import { Grid, Navigation, Pagination } from "swiper";
//  import 'swiper/css/swiper.css'
export default {
  name: "swiper-example-slides-per-column",
  title: "Multi row slides layout",
  data() {
    return {
      indexData: [
        {
          id: "2",
          href: "https://www.weibo.com",
          name: "新浪微博",
        },
        {
          id: "3",
          href: "https://v.qq.com",
          name: "腾讯视频",
        },
        {
          id: "4",
          href: "https://tieba.baidu.com",
          name: "百度贴吧",
        },
        {
          id: "5",
          href: "https://news.sohu.com",
          name: "搜狐新闻",
        },
        {
          id: "6",
          href: "https://mail.163.com",
          name: "网易邮箱",
        },
        {
          id: "7",
          href: "https://www.qunar.com",
          name: "去哪儿网",
        },
        {
          id: "8",
          href: "https://kankan.com",
          name: "迅雷看看",
        },
        {
          id: "9",
          href: "https://youhui.pinduoduo.com",
          name: "拼多多",
        },
        {
          id: "10",
          href: "https://www.toutiao.com",
          name: "今日头条",
        },
        {
          id: "11",
          href: "https://ditu.amap.com",
          name: "高德地图",
        },
      ],
      tabTitle: [
        {
          cid: 7,
          name: "H5全站工程师",
        },
        {
          cid: 10,
          name: "Python+人工智能",
        },
        {
          cid: 9,
          name: "UI/UE设计",
        },
        {
          cid: 8,
          name: "Java+大数据",
        },
      ],
      tabMain: [],
      newMain: [],
      one: [],
      activeId: 7, //默认选中第一个tab
      //轮播图
      swiperOption: {
        modules: [Grid, Navigation, Pagination],
        grid: {
          rows: 2,
          fill: "row",
        },
        slidesPerView: 3,
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
          },
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  watch: {
    activeId: {
      handler(val) {
        this.newMain = this.tabMain.filter((item) => item.cid == val);
        console.log(this.newMain);
      },
    },
  },
  async created() {
    const rrr = await getList("teacher");
    console.log(rrr);
    this.tabMain = rrr;
    console.log(this.tabMain);
    console.log(this.newMain);
    this.newMain = this.tabMain.filter((item) => item.cid == this.activeId);
    console.log(this.newMain);
  },
};
</script>
<style scoped lang="scss">
.baozhu {
  width: 1350px;
  height: 500px;
  margin-left: -78px;
  // background-color: red;
}

#made {
  position: static;
  width: 44px;
  height: 44px;
  margin-top: -50px;
  margin-right: 550px;
  border-radius: -50%;
  background: url()
          no-repeat 50%;
        background-color: #dedede;
        background-size: 10px 9px;
  
  float: right;
}
#made:after {
  display: none;
}
#madef {
  position: static;
  width: 44px;
  height: 44px;
  margin-top: -50px;
  background: url()
    no-repeat 50%;
  background-color: #dedede;
  background-size: 10px 9px;
  margin-left: 550px;
  float: left;
}
#madef:after {
  display: none;
}
.swiper-pagination {
  position: static;
  margin: auto;
  width: 100px;
  height: 100px;
}

.baozhu ::v-deep .swiper-pagination-bullet {
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  font-size: 12px;
  color: black;
  border-radius: 0;

  // opacity: 1;
  // border-radius: -100%;
  background: rgba(0, 0, 0, 0.2);
}
.baozhu ::v-deep .swiper-pagination-bullet-active {
  color: #fff;
  background: #007aff;
}

#fuck {
  position: static;
  float: right;
  margin-top: -300px;
  background-color: #cccccc;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
#fuckk {
  position: static;
  margin-top: -300px;
  background-color: #cccccc;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.swiper-pagination {
  width: 200px;
  height: 50px;
  // background-color: yellow;
}
.swiper {
  width: 1200px;
  height: 430px;
  margin-left: auto;
  margin-right: auto;
  .swiper-slide {
    height: 200px;
    // background-color: red;
    display: flex;
  }
}
.swiper-img {
  width: 145px;
  height: 200px;
  // background-color: blue;
}
.swiper-span {
  width: 189px;
  height: 157px;
  margin-left: 30px;
  // background-color: yellow;
  .swiper-span-top {
    width: 189px;
    height: 25px;
    margin-top: 15px;
    font-size: 20px;
    // background-color: blue;
  }
  .swiper-span-zhong {
    width: 189px;
    height: 16px;
    margin-top: 9px;
    color: #999999;
    font-size: 15px;
    // background-color: red;
  }
  .swiper-span-bottom {
    width: 180px;
    height: 60px;
    margin-top: 20px;
    font-size: 15px;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 3; /** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/
    // background-color: #656;
  }
}
* {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  color: #999999;
}
a {
  text-decoration: none;
  color: white;
}
img {
  width: 100%;
  height: 100%;
}
.hello {
  width: 100%;
  height: 100%;
  background-color: #0066ca;
}
.bao {
  width: 1519px;
  height: 518px;
  background-color: #0066ca;
  margin: auto;
}
.top {
  width: 1519px;
  height: 518px;
  display: flex;
}
.left {
  width: 47%;
  height: 518px;
  background-color: red;
  background: url(../../assets/image/header/img/zhongguolan.jpg);
}
.left-bao {
  width: 493px;
  height: 292px;
  // background-color: yellow;
  margin: 80px 150px;
}
.left-bao-top {
  height: 160px;
}
.white {
  width: 430px;
  height: 10px;
  border-bottom: 1px solid white;
  margin-top: 10px;
  margin-left: 60px;
}
.left-bao-top-img img {
  margin-left: 55px;
}
.left-bao-top-span {
  width: 443px;
  height: 35px;
  color: white;
  font-size: 27px;
  margin-left: 50px;
  margin-top: 20px;
}
.right {
  width: 63.5%;
  height: 518px;
  background: url(../../assets/image/header/img/518.jpg);
}
.left-bao-botton-span {
  width: 90px;
  height: 30px;
  // border: 2px solid white;
  color: white;
  padding-top: 10px;
  margin-left: 90px;
  .left-bao-botton-span-a {
    width: 90px;
    height: 40px;
    border: 3px solid white;
    margin-top: 50px;
    a {
      margin-left: 10px;
      line-height: 40px;
    }
  }
}
.right-img {
  width: 65px;
  height: 65px;
  margin-top: 90px;
}
.tap {
  width: 1519px;
  height: 607px;
  margin: none;
}
.connect {
  width: 1519px;
  height: 40px;
  background-color: #444c56;
  .connect-li {
    width: 1200px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .connect-li-tou {
      color: white;
    }
    // background-color: yellow;
    .abao {
      width: 700px;
      height: 40px;
      display: flex;
      align-items: center;
      margin-left: 20px;
      justify-content: space-around;
      a {
        color: #ccccc5;
        font-size: 12px;
      }
    }
  }
}
.dibu {
  width: 1519px;
  height: 295px;
  background-color: #323840;
  .chunk {
    width: 1200px;
    height: 295px;
    margin: auto;
    background-color: #323840;
    display: flex;
    justify-content: center;
    .sleft {
      width: 303px;
      height: 295px;
      // background-color: red;
      display: flex;
      align-items: center;
    }
    .zhong {
      width: 735px;
      height: 295px;
      // background-color: yellow;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .zuo {
        width: 150px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        // background-color: red;
        .tou {
          margin-top: 15px;
        }
      }
      .dzhong {
        width: 150px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        // background-color: red;
        .tou {
          margin-top: 15px;
        }
      }
      .dyou {
        width: 250px;
        height: 100px;
        color: #999999;
        margin-top: -20px;
        .lianxi {
          font-size: 20px;
          margin-left: 5px;
        }
        .dianhua {
          font-size: 30px;
        }
        .time {
          font-size: 15px;
          margin-left: 5px;
        }
      }
    }
    .you {
      width: 148px;
      height: 295px;
      // background-color: #666;
      display: flex;
      align-items: center;
    }
  }
}
#app {
  width: 1519px;
  height: 400px;
  margin-top: 30px;
  .tab-tit {
    width: 1200px;
    height: 50px;
    margin: auto;
    display: flex;

    li {
      width: 300px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #f4f4f4;
      cursor: pointer;
      color: black;
    }
    .active {
      background-color: #fff;
      color: #0066cc;
      border-top: 5px solid #0066cc;
      font-size: 16px;
    }
  }
  .tab-content {
    width: 1200px;
    height: 500px;
    margin: auto;
    margin-top: 10px;

    // background-color: yellow;
  }
}
</style>
